<template>
  <view class="warp">
    <c-navBar title="我的推荐码" isPerch></c-navBar>
    <!-- <c-navBar title="我的推荐码" isSeat></c-navBar> -->
    <!-- :style="{ height: `${height}px` }" -->
    <view class="content" :style="{ height: `${height}px` }">
      <image
        class="banner"
        style="width: 100%; height: 100%"
        src="../static/friend-icon.jpg"
        ></image>
        <!-- mode="widthFix" -->

      <view
        class="code-box pa"
        style="
          width: 160rpx;
          height: 160rpx;
          overflow: hidden;
          right: 70rpx;
          bottom: 80rpx;
        "
      >
	  <!-- <canvas canvas-id="myQRcode" style="width: 140rpx;height:140rpx;"></canvas> -->
        <image
          style="width: 160rpx; height: 160rpx"
          :src="getCodes.url ? getCodes.url : ''"
          mode=""
        >
        </image>
      </view>
      <!-- <view class="foot">
				<view class="shareCode" @click="copy">
					<p class="shareCode-p">认养推荐码：{{getCodes.code}}</p>
					<view class="shareCode-box">
						复制
					</view>
				</view>
				<button class="shareButton" open-type="share">
					分享好友
				</button>
			</view> -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      getCodes: {}, //邀请码
      height: null, //邀请码
      searchHeight: null, //邀请码
	  tempFilePath: null,
    };
  },
  onLoad() {
    this.getCode();
    this.getHeight();
	this.getQrcode();
  },
  onShareAppMessage(res) {
    // if (res.from === 'button') { // 来自页面内分享按钮
    // 	console.log(res.target)
    // }
    return {
      title: "喜牛庭生鲜",
      path: "/pages/tabbar/home",
    };
  },
  onShareTimeline() {
    return {
      title: "喜牛庭生鲜",
      path: "/pages/tabbar/home",
      // imageUrl: 'http://123.png',
    };
  },

  methods: {
    // 邀请好友
    getCode() {
      this.$api.getQRCode({}).then((res) => {
        // console.log(res,"二维码");
        this.getCodes = res.data;
      });
    },
    // 复制
    copy() {
      uni.setClipboardData({
        data: this.getCodes.code,
        success() {
          uni.showToast({
            icon: "none",
            title: "复制成功",
          });
        },
        fail(err) {
          console.log(err, "err");
        },
      });
    },

    getHeight() {
      if (wx.canIUse("getMenuButtonBoundingClientRect")) {
        let sysInfo = wx.getSystemInfoSync();
        this.statusBarHeight = sysInfo.statusBarHeight;
        let rect = wx.getMenuButtonBoundingClientRect();
        this.menuButtonRect = JSON.parse(JSON.stringify(rect));
        let navBarHeight =
          (rect.top - sysInfo.statusBarHeight) * 2 + rect.height;
        this.navBarHeight = navBarHeight;
        let navHeight = sysInfo.statusBarHeight + navBarHeight;
        this.height = wx.getSystemInfoSync().windowHeight - navHeight;
        // this.height = navHeight;
      }
    },
	
	getQrcode() {
	        let that = this
	        new QRCode({
	            width: 70,
	            height: 70,
	            canvasId: 'myQRcode',
	            text: 'https://whalex.info/pages/tabbar/home?id=' + '1',
	            callback: () => {
	                setTimeout(() => {
	                    wx.canvasToTempFilePath({
	                        canvasId: 'myQRcode',
	                        success(res) {
	                            that.setData({
	                                tempFilePath: res.tempFilePath
	                            })
	                        },
	                        fail(err) {
	                            console.log(err)
	                            wx.showToast({
	                                title: '生成二维码失败',
	                                icon: 'none'
	                            })
	                        }
	                    })
	                }, 500)
	            }
	        });
	    },
		
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100vw;
  // height: 100vh;
  // overflow: hidden;
}

.banner {
  position: relative;
}

.foot {
  position: absolute;
  top: 1395rpx;
  left: 55rpx;
  width: 640rpx;

  .shareCode {
    width: 600rpx;
    height: 96rpx;
    background: #ffffff;
    border-radius: 36rpx 36rpx 36rpx 36rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0rpx 24rpx;
    box-sizing: border-box;
    margin: 0 auto;

    .shareCode-p {
      font-size: 32rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #333333;
    }

    .shareCode-box {
      width: 72rpx;
      height: 40rpx;
      background: #e6f6e9;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      font-size: 20rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      color: #2ad03d;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .shareButton {
    width: 640rpx;
    height: 96rpx;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    color: #009e42;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 24rpx;
  }
}
</style>
